<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      ok-text="确认"
      cancel-text="取消"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleCancel">
            取消
          </a-button>
          <a-button @click="handleOk" type="primary">确认</a-button>
        </div>
      </template>
      <a-form-model :model="model" :rules="rules" ref="ruleForm">
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="账号"
          prop="userName"
        >
          <a-input
            disabled
            v-model="model.userName"
            placeholder="请输入账号"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="密码"
          prop="password"
        >
          <a-input
          class="bg"
            type="password"
            v-model="model.password"
            placeholder="请输入密码"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="确认密码"
          prop="checkPass"
        >
          <a-input
            type="password"
            v-model="model.checkPass"
            placeholder="请输入密码"
          ></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import api from "@/api/apiServer";

export default {
  data() {
    return {
      visible: false,
      title: "修改密码",
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
    };
  },
  computed: {
    rules() {
      return {
        userName: [
          { required: true, message: "请输入账号", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        checkPass: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            validator: (rule, value, cbfn) => {
              if (value !== this.model.password) {
                cbfn("两次密码不一致");
              }
              cbfn();
            },
          },
        ],
      };
    },
  },
  methods: {
    showModal() {
      this.visible = true;
      this.$set(this.model, "userName", localStorage.getItem("userName"));
    },
    async handleSubmit() {
      if (this.model.password == this.model.checkPass) {
        const res = await api.UserUpdatePassword(this.model);
        if (res.code && res.code !== 200) {
          this.$message.error(res.message, [1]);
          return;
        }
        this.$message.success(res.message, [1]);
        this.visible = false;
        localStorage.clear();
        this.$router.push({ path: "/login" });
      } else {
      }
    },
    handleOk() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.handleSubmit();
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>
